<template>
  <main class="help-center">
    <section class="section-header">
      <img class="nav-logo" src="../../assets/front/img/logo_main.png">
      <div class="welcome">
        帮助中心
      </div>
      <div class="help-nav-list">
        <div v-for="(item,index) in navList" :key="index" class="help-nav-item"
             :class="{active:index===activeIndex}" @click="handleNav(index)">
          {{item.name}}
        </div>
      </div>
    </section>
    <section class="section-search">
      <div class="search-form">
        <img src="../../assets/front/img/search.svg">
        <input class="search-input" placeholder="输入问题关键字，如订单"/>
      </div>
      <div class="search-button">搜索</div>
    </section>
  </main>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            activeIndex: 0,
            navList: [
                {
                    name: '首页',
                    path: '/f'
                },
                {
                    name: '常见问题',
                    path: ''
                },
                {
                    name: '联系客服',
                    path: ''
                },
                {
                    name: '游客留资',
                    path: '/f/contact-us'
                }
            ]
        };
    },
    methods: {
        handleNav(index) {
            this.$router.push(this.navList[index].path);
        }
    }
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .help-center {
    width: $page-width;
    .section-header {
      padding: 0 5px;
      height: 85px;
      display: flex;
      align-items: center;
      background: $main-color;
      .welcome {
        margin-left: 10px;
        padding: 0 15px;
        height: 60px;
        @include flex-center;
        font-size: 24px;
        color: #fff;
        border-left: $border;
      }
      .help-nav-list {
        flex-grow: 1;
        height: 100%;
        @include flex-align-center;
        justify-content: flex-end;
        .help-nav-item {
          padding: 0 20px;
          height: 100%;
          color: #fff;
          cursor: pointer;
          @include flex-center;
          &.active, &:hover {
            background-color: #16ab58;
          }
        }
      }
    }
    .section-search {
      height: 130px;
      @include flex-center;
      background: url("../../assets/front/img/help_center_banner.png");
      background-size: 100%;
      .search-form {
        width: 300px;
        height: 50px;
        @include flex-align-center;
        border: 2px solid $main-color;
        background: #fff;
        > img {
          margin: 0 10px;
          height: 21px;
        }
        .search-input {
          border: none;
          outline: none;
          height: 46px;
          width: 250px;
        }
      }
      .search-button {
        width: 100px;
        height: 50px;
        @include flex-center;
        color: white;
        background: $main-color;
      }
    }
    .main-section {
      height: 570px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background: url("../../assets/front/img/login_bg.png");
      .login-form {
        padding: 26px 54px;
        width: 420px;
        height: 410px;
        background-color: rgba(250, 250, 250, 0.75);
        border-radius: 5px;
        border: solid 1px rgba(230, 230, 230, 0.75);
        opacity: 0.75;
        .login-title {
          padding-bottom: 10px;
          font-size: 22px;
          color: #646464;
          border-bottom: $border;
        }
        .text {
          margin-top: 15px;
          width: 100%;
          height: 40px;
        }
        .remember {
          margin-top: 15px;
          @include flex-center;
          justify-content: flex-start;
          > input {
            margin-right: 8px;
          }
        }
        .submit-button {
          margin-top: 15px;
          width: 100%;
          height: 40px;
          @include flex-center;
          color: white;
          background-color: #009040;
          border-radius: 4px;
          font-size: 20px;
          letter-spacing: 8px;
        }
        .ops {
          margin-top: 40px;
          display: flex;
          justify-content: flex-end;
          .op {
            margin-left: 20px;
            color: $main-color;
          }
        }
      }
    }
  }

</style>
